<template>
  <div ref="appRef" id="home">
    <pageTitle></pageTitle>
    <div class="under">
      <left></left>
      <center></center>
      <right></right>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
import { encrypt, decrypt } from '../login/index.js'

import pageTitle from '@/views/newDashboard/pageTitle'
import left from '@/views/newDashboard/left'
import center from '@/views/newDashboard/center'
import right from '@/views/newDashboard/right'
import bottom from '@/views/newDashboard/bottom'
import { mapState } from 'vuex'

import { makeCode } from '@/utils'
export default {
  name: 'homeIndex',
  // mixins: [drawMixin],
  components: {
    pageTitle,
    left,
    center,
    right,
    bottom,
  },
  data() {
    return {
      loginForm: {
        username: 'admin',
        password: 'star1022',
        identify: undefined,
      },
      identifyCode: '',
      otherQuery: {},
      stringval: '',
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
        this.localFUN()
      },
      immediate: true,
    },
  },
  computed: {
    ...mapState({
      token: (state) => state.user.token,
    }),
  },
  created() {
    let uu = window.location.hash.split('?')[1]
    if (uu == 'a=b') {
      localStorage.setItem('path', '/dashboard?a=b')
      this.$store.dispatch('permission/ResetPermissionsAndRoute')
      localStorage.setItem('username', JSON.stringify(this.loginForm.username))
      this.passwordinput(this.loginForm.password)
      let obj = {
        username: this.loginForm.username,
        password: this.stringval,
      }
      this.$store.dispatch('user/login', obj).then((res) => {
        if (!this.$store.getters.token) {
          this.makeCode()
        }
        this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
      })
    } else {
      this.$store.dispatch('permission/ResetPermissionsAndRoute')

      this.$router.push({ path: this.redirect || '/', query: this.otherQuery })

      localStorage.setItem('path', '/dashboard')
    }
  },

  methods: {
    passwordinput(e) {
      if (this.loginForm.password !== '') {
        var password = this.hashPassword(e)
        this.stringval = password
      }
    },
    hashPassword(passwored) {
      return encrypt(passwored)
    },

    localFUN() {
      let uu = window.location.hash.split('?')[1]
      if (uu == 'a=b') {
        localStorage.setItem('path', '/dashboard?a=b')
        this.$store.dispatch('permission/ResetPermissionsAndRoute')
        localStorage.setItem('username', JSON.stringify(this.loginForm.username))
        this.passwordinput(this.loginForm.password)
        let obj = {
          username: this.loginForm.username,
          password: this.stringval,
        }
        this.$store.dispatch('user/login', obj).then((res) => {
          if (!this.$store.getters.token) {
            this.makeCode()
          }
          this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
        })
      } else {
        this.$store.dispatch('permission/ResetPermissionsAndRoute')

        this.$router.push({ path: this.redirect || '/', query: this.otherQuery })

        localStorage.setItem('path', '/dashboard')
      }
    },
    makeCode() {
      this.identifyCode = makeCode(4)
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
  },
}
</script>

<style lang="scss" scoped>
#home {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
  z-index: 999;
  font-family: Source Han Sans SC;
  font-size: 0.8333vw;
  background-image: url('~@/assets/newDashboard/bigBG.png');
  background-size: cover;
  color: #fff;
}

.under {
  display: flex;
  align-items: center;
}
</style>
